<template>
  <div>
    <a-table
      :columns="myColumns"
      :data-source="dataSource"
      :highlighted="highlighted"
      :customRow="defineMyRowProps"
      bordered
    />
  </div>
</template>

<script>
const cellDatas = () => {
  return {}
}

const buildColumns = (initColumns, self) => {
  return initColumns.map((columnData, index) => {
    const { customCell, ...rest } = columnData
    return {
      ...rest,
      customCell(record, rowIndex) {
        const params = { record, rowIndex, fieldIndex: index, fieldName: rest.dataIndex, column: rest }
        if (self.cellProps) {
          return self.cellProps(params)
        }
        return {}
      },
    }
  })
}

// const packColumn = (fieldData, fieldIndex) => {
//   const { customCell = () => {}, ...rest } = fieldData
//   return {
//     ...rest,
//     customCell: (record, rowIndex) => {
//       return customCell({ ...fieldData, record, rowIndex, fieldIndex })
//     },
//   }
// }

export default {
  name: 'testTable',
  props: {
    columns: Array,
    dataSource: Array,
    highlighted: Array,
    showBackground: Boolean,
    rowProps: Function,
    cellProps: Function,
  },
  watch: {
    showBackground(_value) {
      this.myShowBackground = _value
    },
  },
  data() {
    const defineMyRowProps = (record, rowIndex) => {
      if (this.rowProps) {
        return this.rowProps(record, rowIndex)
      }
      return {}
    }

    return {
      myShowBackground: this.showBackground,
      defineMyRowProps,
    }
  },

  computed: {
    myColumns() {
      return buildColumns(this.columns, this)
    },
  },
  methods: {
    // getRowProps,
    // getRowProps: (record, index) => {
    //   return {}
    // },
  },
}
</script>

<style></style>
